<!-- 访问统计 -->
<template>
  <div class="access">
    <div style="display:flex;margin: 30px 0px;justify-content: space-around;flex-wrap: wrap;">
    <a-form-item label="IP">
      <a-input v-model:value="value" placeholder="请输入IP地址" style="width:300px"/>
    </a-form-item>
    <a-form-item label="UA">
      <a-input v-model:value="value" placeholder="请输入 User Agent" style="width:300px"/>
    </a-form-item>
    <a-form-item label="URL">
      <a-input v-model:value="value" placeholder="请输入URL" style="width:300px" />
    </a-form-item>
    <a-form-item label="地址">
      <a-input v-model:value="value" placeholder="请输入地址" style="width:300px" />
    </a-form-item>
    <a-form-item label="浏览器">
      <a-input v-model:value="value" placeholder="请输入浏览器" style="width:300px" />
    </a-form-item>
    <a-form-item label="内核">
      <a-input v-model:value="value" placeholder="请输入内核" style="width:300px" />
    </a-form-item>
    <a-form-item label="OS">
      <a-input v-model:value="value" placeholder="请输入操作系统" style="width:300px" />
    </a-form-item>
    <a-form-item label="设备">
      <a-input v-model:value="value" placeholder="请输入设备" style="width:300px" />
    </a-form-item>
  </div>
  <div style="margin: 10px 90%;display: flex;">
    <a-button type="primary">搜索</a-button>
    <a-button style="margin: 0px 10px;">重置</a-button>
  </div>
  <!-- <a-table :row-selection="rowSelection" :columns="columns" :data-source="state.list"></a-table> -->
  <a-table :columns="columns" :data-source="state.list">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import type { TableProps, TableColumnType } from 'ant-design-vue';
import axios from 'axios'
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns: TableColumnType<DataType>[] = [
  {
    title: 'URL',
    dataIndex: '',
  },
  {
    title: 'IP',
    dataIndex: 'name',
  },
  {
    title: '浏览器',
    dataIndex: 'relation',
  },
  {
    title: '内核',
    dataIndex: 'isChildren',
  },
  {
    title: '操作系统',
    dataIndex: 'htmlContent',
  },
  {
    title: '设备',
    dataIndex: '',
  },
  {
    title: '地址',
    dataIndex: 'date',
  },
  {
    title: '访问量',
    dataIndex: 'preContent',
  },
  {
    title: '访问时间',
    dataIndex: 'preContent',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
];
export default defineComponent({
  setup() {
    const state=reactive({
      list:[]
    });
    axios.get('http://localhost:7001/api/get_visit').then(res=>{
      const {data}=res.data
      state.list=data
      console.log('12',state.list)
    })
    // const rowSelection: TableProps['rowSelection'] = {
    //   onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
    //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //   },
    //   getCheckboxProps: (record: DataType) => ({
    //     disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //     name: record.name,
    //   }),
    // };

    return {
      state,
      columns,
      // rowSelection,
    };
  },
})
</script>

<style>
.access{
  width: 100%;
  height: 100%;
}
.ant-row{
  margin-left: 30px;
}
</style>